<template>
  <div class="wrap">
    <div class="bgWrap">
      <div class="item">
        <div class="left">
          <em class="redPoint"></em>
          店铺头像
        </div>
        <div class="right rightWrap" v-if="headImage != ''">
          <img :src="$imgUrl + headImage" alt="" class="leftImg" />
          <img src="@/assets/eidtor2.png" alt="" class="deleImg" @click="deleHeadImg" />
        </div>
        <div class="right" v-else>
          <van-uploader
            v-model="fileListShopHead"
            :after-read="afterReadShopHead"
            :max-count="1"
            class="uploadImg"
          />
        </div>
      </div>
      <div class="item">
        <div class="left">
          <em class="redPoint"></em>
          背景
        </div>
        <div class="right rightWrap" v-if="bgImage != '' && fromId == 0">
          <img :src="$imgUrl + bgImage" alt="" class="leftImg" />
          <img src="@/assets/eidtor2.png" alt="" class="deleImg" @click="deleBgImg" />
        </div>
        <div class="right" v-else>
          <!-- <img src="@/assets/uploadImg.png" alt="" class="uploadImg" /> -->
          <van-uploader
            v-model="fileListBgImg"
            :after-read="afterReadBgImg"
            :max-count="1"
            class="uploadImg"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          店铺名称
        </div>
        <div class="inputWrap">
          <input
            type=""
            name=""
            value=""
            v-model="shopName"
            placeholder="请输入店铺名称(8字内)"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          <!-- 店铺类型{{ fromId == 0 ? "（不可修改）" : "" }} -->
          店铺类型<em style="font-size: 10px; color: #666"
            >（申请资料已提交不可修改类型）</em
          >
        </div>
        <div
          class="inputWrap"
          style="
            line-height: 40px;
            padding-left: 15px;
            width: calc(100% - 15px);
            color: #bbbbbd;
          "
        >
          <!-- <input
            type=""
            name=""
            value=""
            v-model="chooseShop.title"
            placeholder="请选择店铺类型"
            :disabled="fromId == 0 ? 'disabled' : ''"
          />
          <img
            src="@/assets/rightArrow.png"
            alt=""
            class="rightArrow"
            v-if="fromId != 0"
          /> -->
          {{ chooseShop.title }}
        </div>
      </div>
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          店铺简介
        </div>
        <div class="inputWrap">
          <input
            type=""
            name=""
            value=""
            v-model="introduction"
            placeholder="请输入店铺简介"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          营业时间
        </div>
        <div class="inputWrap2">
          <em class="startTime" @click="showStartTime = true">{{
            startTime || "开始营业时间"
          }}</em>
          —
          <em class="endTime" @click="showEndTime = true">{{
            endTime || "结束营业时间"
          }}</em>
        </div>
      </div>
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          联系人
        </div>
        <div class="inputWrap">
          <input
            type=""
            name=""
            value=""
            v-model="contactName"
            placeholder="请输入联系人名字(5字内)"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          联系电话
        </div>
        <div class="inputWrap">
          <input
            type=""
            name=""
            value=""
            v-model="contactPhone"
            placeholder="请输入联系电话"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          微信
        </div>
        <div class="inputWrap">
          <input type="" name="" value="" v-model="weiChat" placeholder="请输入微信号" />
        </div>
      </div>
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          QQ
        </div>
        <div class="inputWrap">
          <input type="" name="" value="" v-model="qq" placeholder="请输入QQ" />
        </div>
      </div>
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          起送费
        </div>
        <div class="inputWrap">
          <input
            type="number"
            name=""
            value=""
            v-model="startSendMoney"
            placeholder="请输入起送费(元)"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          配送费
        </div>
        <div class="inputWrap">
          <input
            type="number"
            name=""
            value=""
            v-model="postageMoney"
            placeholder="请输入配送费(元)"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          所在校区
        </div>
        <div class="inputWrap" @click="chooseSchool">
          <input
            type=""
            name=""
            value=""
            v-model="chooseSchoolData.schoolIName"
            placeholder="请选择校区"
          />
          <img src="@/assets/rightArrow.png" alt="" class="rightArrow" />
        </div>
      </div>
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          所在宿舍楼
        </div>
        <div
          class="inputWrap"
          style="line-height: 40px; padding-left: 12px; width: calc(100% - 12px)"
          @click="reqcolumnsDormit"
        >
          <!-- <input
            type=""
            name=""
            value=""
            v-model="chooseDormit.addressName"
            placeholder="请选择所在宿舍楼"
          /> -->
          {{ chooseDormit.addressName || "请选择所在宿舍楼" }}
          <img src="@/assets/rightArrow.png" alt="" class="rightArrow" />
        </div>
      </div>
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          寝室号
        </div>
        <div class="inputWrap">
          <input
            type=""
            name=""
            value=""
            v-model="DormitoryNumber"
            placeholder="请输入寝室号"
          />
        </div>
      </div>
    </div>
    <div class="nextButton" @click="JumpNext">下一步</div>
    <!-- 选择店铺类型： -->
    <div class="popupWrap">
      <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
        <van-picker
          title="选择店铺类型"
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
        />
      </van-popup>
    </div>
    <!-- 选择开张时间 -->
    <div class="popupWrap">
      <van-popup v-model="showStartTime" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          v-model="startTime"
          type="time"
          title="选择开张时间"
          :min-hour="0"
          :max-hour="24"
          @confirm="sureStartTime"
          @cancel="showStartTime = false"
        />
      </van-popup>
    </div>
    <!-- 选择关店时间 -->
    <div class="popupWrap">
      <van-popup v-model="showEndTime" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          v-model="endTime"
          type="time"
          title="选择打烊时间"
          :min-hour="0"
          :max-hour="24"
          @confirm="sureEndTime"
          @cancel="showEndTime = false"
        />
      </van-popup>
    </div>
    <!-- 选择宿舍楼： -->
    <div class="popupWrap">
      <van-popup v-model="showDormitory" position="bottom" :style="{ height: '40%' }">
        <van-picker
          show-toolbar
          title="选择宿舍"
          :columns="columnsDormit"
          @confirm="onConfirmDormit"
          @cancel="showDormitory = false"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import { regex } from "@/assets/js/identyRules.js";
import { Switch, Checkbox, Popup, Picker, Uploader, DatetimePicker } from "vant";
import axios from "axios"; // 引入axios
import {
  apiShopTypeList,
  apiAddressList,
  apiUpdateShopList,
  apiPlatformGetUserShopDetails,
} from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      fromId: this.$route.query.fromId, //从店铺-店铺资料来的 0，否则就是初次进入填写店铺资料
      checked: true,
      show: false,
      showStartTime: false, //开张时间mask
      showEndTime: false, //打烊时间mask
      showDormitory: false,
      startTime: "",
      endTime: "",
      columns: [], //店铺类型
      columnsDormit: [], //宿舍楼
      shopName: "", //商铺名称
      introduction: "", //店铺简介
      contactName: "", //联系人姓名
      contactPhone: "", //联系人电话
      weiChat: "", //微信
      qq: "", //qq
      startSendMoney: "0", //起送费
      postageMoney: "0", //配送费
      DormitoryNumber: "", //输入的寝室号
      fileListShopHead: [], //店铺头像-组件
      fileListBgImg: [], //店铺背景图
      headImage: "", //店铺头像-服务器地址
      bgImage: "", //店铺背景-服务器地址
      resShopTypeList: [], //店铺类型
      resDormitList: [], //宿舍列表
      chooseShop: "", //选择的店铺类型
      chooseDormit: "", //选择的宿舍楼
      // chooseSchoolData: this.$route.query.chooseSchoolData? this.$route.query.chooseSchoolData: "", //选择的学校信息
      chooseSchoolData: JSON.parse(sessionStorage.getItem("chooseSchoolData")), //选择的学校信息
      resShopInfo: "", //店铺信息
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    this.getShopTypeList(); //店铺类型

    var getApplyInformation = JSON.parse(sessionStorage.getItem("applyInformation"));
    if (getApplyInformation) {
      (this.fileListShopHead = getApplyInformation.fileListShopHead),
        (this.headImage = getApplyInformation.headImage),
        (this.fileListBgImg = getApplyInformation.fileListBgImg),
        (this.bgImage = getApplyInformation.bgImage),
        (this.shopName = getApplyInformation.shopName),
        (this.chooseShop = getApplyInformation.chooseShop),
        (this.introduction = getApplyInformation.introduction),
        (this.startTime = getApplyInformation.startTime),
        (this.endTime = getApplyInformation.endTime),
        (this.contactName = getApplyInformation.contactName),
        (this.contactPhone = getApplyInformation.contactPhone),
        (this.weiChat = getApplyInformation.weiChat),
        (this.qq = getApplyInformation.qq),
        (this.startSendMoney = getApplyInformation.startSendMoney),
        (this.postageMoney = getApplyInformation.postageMoney),
        // this.chooseSchoolData= getApplyInformation.chooseSchoolData,
        (this.chooseDormit = getApplyInformation.chooseDormit),
        (this.DormitoryNumber = getApplyInformation.DormitoryNumber);
    }
    // if(this.fromId==0){ //从编辑店铺资料来的，且没有选择过学校
    //    this.getShopDetails() //请求已有的店铺资料 并填充好内容
    // }
    this.getShopDetails(); //请求已有的店铺资料 并填充好内容
  },
  methods: {
    //获取店铺信息：
    getShopDetails() {
      apiPlatformGetUserShopDetails({}).then((res) => {
        this.resShopInfo = res.data;
        console.log("店铺信息", this.resShopInfo);
        (this.fileListShopHead = []),
          (this.headImage = this.resShopInfo.headImg),
          (this.fileListBgImg = []),
          (this.bgImage = this.resShopInfo.backgroundImg),
          (this.shopName = this.resShopInfo.shopName),
          (this.chooseShop = {
            title: "",
          });
        (this.chooseShop.title = this.resShopInfo.shopTypeName), //类型名称，id没有，修改店铺不能改类型
          (this.introduction = this.resShopInfo.intro),
          (this.startTime = this.resShopInfo.startBusinessTime),
          (this.endTime = this.resShopInfo.endBusinessTime),
          (this.contactName = this.resShopInfo.realName),
          (this.contactPhone = this.resShopInfo.mobile),
          (this.weiChat = this.resShopInfo.wxNum),
          (this.qq = this.resShopInfo.qqNum),
          (this.startSendMoney = this.resShopInfo.startPrice),
          (this.postageMoney = this.resShopInfo.transPrice),
          (this.chooseSchoolData = {
            schoolIName: "",
            schoolId: "",
          });
        if (this.$route.query.chooseSchoolData) {
          (this.chooseSchoolData.schoolIName = this.$route.query.chooseSchoolData.schoolIName),
            (this.chooseSchoolData.schoolId = this.$route.query.chooseSchoolData.schoolId);
        } else {
          (this.chooseSchoolData.schoolIName = this.resShopInfo.schoolName),
            (this.chooseSchoolData.schoolId = this.resShopInfo.schoolId);
        }

        this.DormitoryNumber = this.resShopInfo.dormNum;
        //处理宿舍楼信息:
        apiAddressList({
          id: this.resShopInfo.schoolId,
        }).then((res) => {
          var resDormitList = res.data;
          resDormitList.map((item) => {
            if (this.resShopInfo.towerId == item.id) {
              this.chooseDormit = item;
            }
          });
          console.log("定位的宿舍信息", this.chooseDormit);
        });
      });
    },
    //编辑商品信息-删除已有的头像图片
    deleHeadImg() {
      this.fileListShopHead = [];
      this.headImage = "";
    },
    //编辑商品信息-删除已有的背景图片
    deleBgImg() {
      this.fileListBgImg = [];
      this.bgImage = "";
    },
    // 存入已经填写好的信息：
    saveInformation() {
      console.log("存背景", this.bgImage);
      var applyInformation = {
        fileListShopHead: this.fileListShopHead,
        headImage: this.headImage,
        fileListBgImg: this.fileListBgImg,
        bgImage: this.bgImage,
        shopName: this.shopName,
        chooseShop: this.chooseShop,
        introduction: this.introduction,
        startTime: this.startTime,
        endTime: this.endTime,
        contactName: this.contactName,
        contactPhone: this.contactPhone,
        weiChat: this.weiChat,
        qq: this.qq,
        startSendMoney: this.startSendMoney,
        postageMoney: this.postageMoney,
        chooseSchoolData: this.chooseSchoolData,
        chooseDormit: this.chooseDormit,
        DormitoryNumber: this.DormitoryNumber,
      };
      sessionStorage.setItem("applyInformation", JSON.stringify(applyInformation));
    },
    sureStartTime(value) {
      this.startTime = value;
      this.showStartTime = false;
    },
    sureEndTime(value) {
      this.endTime = value;
      this.showEndTime = false;
    },
    //上传店铺头像图片到服务器：
    afterReadShopHead(file) {
      var that = this;
      var serverSrc = this.$imgUrl;
      var form_data = new FormData();
      var files = file.file;
      form_data.append("file", files);
      axios({
        url: serverSrc + "/common/upload",
        data: form_data,
        contentType: false,
        processData: false,
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then(function (res) {
        that.headImage = res.data.data.fileName;
      });
    },
    //上传店铺背景图片到服务器：
    afterReadBgImg(file) {
      var that = this;
      var serverSrc = this.$imgUrl;
      var form_data = new FormData();
      var files = file.file;
      form_data.append("file", files);
      axios({
        url: serverSrc + "/common/upload",
        data: form_data,
        contentType: false,
        processData: false,
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then(function (res) {
        that.bgImage = res.data.data.fileName;
      });
    },
    //获取店铺类型：
    getShopTypeList() {
      apiShopTypeList({}).then((res) => {
        this.resShopTypeList = res.data;
        console.log("店铺类型:", this.resShopTypeList);
        this.resShopTypeList.map((item) => {
          this.columns.push(item.title);
        });
      });
    },
    //选择店铺类型：
    onConfirm(value, index) {
      this.show = false;
      this.chooseShop = this.resShopTypeList[index];
    },
    //选择学校：
    chooseSchool() {
      this.resDormitList = [];
      this.columnsDormit = [];
      this.chooseDormit = "";
      this.saveInformation(); // 存入已经填写好的信息
      this.$router.push({
        path: "/pages/schoolList",
        query: {
          //传递参数
          fromId: 4,
        },
      });
    },
    //请求宿舍列表
    reqcolumnsDormit() {
      if (this.chooseSchoolData.schoolId) {
        //如果已经选择了学校 则请求对应的宿舍列表
        apiAddressList({
          id: this.chooseSchoolData.schoolId,
        }).then((res) => {
          this.showDormitory = true;
          this.resDormitList = res.data;
          this.resDormitList.map((item) => {
            this.columnsDormit.push(item.addressName);
          });
          console.log("宿舍列表", this.resDormitList);
        });
      } else {
        this.$toast("请先选择校区");
      }
    },
    //确认选择宿舍楼
    onConfirmDormit(value, index) {
      this.showDormitory = false;
      this.chooseDormit = this.resDormitList[index];
    },

    //下一步
    JumpNext() {
      if (
        !this.bgImage ||
        !this.headImage ||
        !this.DormitoryNumber ||
        !this.endTime ||
        !this.startTime ||
        !this.introduction ||
        !this.contactPhone ||
        !this.qq ||
        !this.contactName ||
        !this.chooseSchoolData ||
        !this.shopName ||
        !this.startSendMoney ||
        !this.chooseDormit ||
        !this.postageMoney ||
        !this.weiChat
      ) {
        this.$toast.fail("请填写完整信息!");
        return;
      }
      if (!regex.phone.test(this.contactPhone)) {
        this.$toast.fail("请输入正确的手机号");
        return;
      }
      if (!regex.qq.test(this.qq)) {
        this.$toast.fail("请输入正确的QQ号");
        return;
      }
      if (Number(this.startSendMoney) < 0) {
        this.$toast.fail("起送费不能为负数");
        return;
      }
      if (Number(this.postageMoney) < 0) {
        this.$toast.fail("配送费不能为负数");
        return;
      }

      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var time = `${year}-${month}-${day}`;
      console.log("time", time);
      apiUpdateShopList({
        backgroundImg: this.bgImage,
        headImg: this.headImage,
        dormNum: this.DormitoryNumber,
        endBusinessTime: `${time} ${this.endTime}:00`,
        startBusinessTime: `${time} ${this.startTime}:00`,
        intro: this.introduction,
        mobile: this.contactPhone,
        qqNum: this.qq,
        realName: this.contactName,
        schoolId: this.chooseSchoolData.schoolId,
        shopName: this.shopName,
        startPrice: this.startSendMoney,
        towerId: this.chooseDormit.id,
        transPrice: this.postageMoney,
        wxNum: this.weiChat,
      }).then((res) => {
        console.log("填写完毕", res);
        if (res.code == 200) {
          this.$router.push({
            path: "/pages/bIndex",
            query: {
              //传递参数
            },
          });
        }
        console.log("宿舍列表", this.resDormitList);
      });
    },
    onChange() {},
    onCancel() {},
  },
  created() {},
  components: {
    [Switch.name]: Switch,
    [Checkbox.name]: Checkbox,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Uploader.name]: Uploader,
    [DatetimePicker.name]: DatetimePicker,
  },
};
</script>

<style scoped>
.beSale {
  width: 95%;
  display: block;
  margin: 15px auto;
}
.bgWrap {
  width: calc(95% - 30px);
  padding: 20px 15px;
  margin: 20px auto;
  background: #ffffff;
  border-radius: 20px;
}
.item {
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  margin-bottom: 15px;
}
.left {
  float: left;
  margin-top: 30px;
}
.rightWrap {
  float: right;
  margin-top: 7px;
  position: relative;
  right: 7px;
}
.leftImg {
  width: 80px;
  height: 80px;
  border-radius: 10px;
}
.deleImg {
  position: absolute;
  width: 15px;
  height: 15px;
  top: -6px;
  right: -4px;
}
.redPoint {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #ff4646;
  border-radius: 50%;
  margin-bottom: 2px;
}
.right {
  float: right;
}
.uploadImg {
  /* width: 50px;
  height: 50px; */
}
.title {
}
.inputWrap {
  width: 100%;
  background: #f2f4fa;
  height: 40px;
  margin-top: 10px;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
}
.inputWrap2 {
  width: 100%;
  margin-top: 10px;
}
.startTime,
.endTime {
  display: inline-block;
  background: #f2f4fa;
  padding: 10px 15px;
  border-radius: 20px;
  color: #999999;
}
.endTime {
}
input {
  border: 0px;
  background: #f2f4fa;
  width: 85%;
  height: 38px;
  margin-left: 15px;
}
input::placeholder {
  font-size: 12px;
  font-weight: 300;
  color: #999999;
}
.rightArrow {
  width: 4px;
  height: 8px;
  margin-right: 15px;
  margin-top: 15px;
}
.nextButton {
  width: 95%;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}
.van-checkbox {
  float: left;
}
</style>
